<template>
  <div :style="[{backgroundColor: theme.backgroundColor}]" class="asideNav_box">
    <div :style="[{color:theme.activeTextColor}]" @click="isCollapse=!isCollapse" class="asideNav_sider_trigger cenCen">
      <i v-if="isCollapse" class="el-icon-arrow-right"></i>
      <i v-else class="el-icon-arrow-left"></i>
    </div>

    <el-menu @select="sureThisActive" style="border:none;" class="el_menu_vertical" :default-active="thisActive" :active-text-color="theme.activeTextColor" :text-color="theme.textColor" :background-color="theme.backgroundColor" :collapse="isCollapse">
      <el-submenu v-if=" item.children&& item.children.length" v-for="(item,index) of navList" :key="index" :index="indexToString(index)">
        <template slot="title">
          <i :style="[{color:thisActiveIndex==index?theme.activeTextColor:''}]" :class="item.meta.icon" class="this_el_menu_item"></i>
          <span slot="title">{{item.meta.title}}</span>
        </template>
        <el-menu-item-group v-if=" item.children&& item.children.length" class="el_menu_item">
          <el-menu-item v-for="(itemChildren,itemChildrenIndex) of  item.children" :key="itemChildrenIndex" :index="indexToString(index,itemChildrenIndex)" class="el_menu_item">{{itemChildren.meta.title}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item v-else :index="indexToString(index)">
        <i :class="item.meta.icon" class="this_el_menu_item"></i>
        <span slot="title">{{item.meta.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  props: {
    navList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 主题
    theme() {
      return this.$store.state.publicVariable.theme;
    },
    //当前激活的选项
    thisActiveIndex() {
      return this.thisActive.split("-")[0];
    }
  },
  watch: {
    isCollapse() {
      this.sureSideNavWidth();
    }
  },
  mounted() {
    this.sureSideNavWidth();
  },
  data() {
    return {
      thisActive: "0", //当前激活的选项
      isCollapse: false //是否关闭
    };
  },
  created() {
    this.sureThisPage();
  },
  methods: {
    // 确定当前展示页面
    sureThisPage() {
      // console.log(this.thisActive);
      // console.log(this.navList);
      const path = this.navList[this.thisActive].path;
      // console.log("pa", path);
      this.$openPage(path);
    },
    sureSideNavWidth() {
      setTimeout(() => {
        this.$parent.sureSideNavWidth();
      }, 360);
    },
    // 索引转字符串
    indexToString(one, two, three) {
      if (three != undefined) {
        return `${one}-${two}-${three}`;
      } else if (two != undefined) {
        return `${one}-${two}`;
      } else if (one != undefined) {
        return `${one}`;
      } else {
        return "";
      }
    },
    // 确定当前激活的选项
    sureThisActive(val) {
      this.thisActive = val;
      this.sureThisPage();
    }
  }
};
</script>
<style scoped>
@import "./index.css";
</style>
